<template>
	<wsPage title="地区管理">
		<div slot="page_operate">
			<Button ><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>

		<wsSmPanel>
			<div slot="list_operate">
				<Select class="ws-form-select" v-model="params.languageCode" @on-change="languageChange">
					<Option :value="item.code" v-for="item in fields.languages">{{item.motherTongue}}/{{item.english}}</Option>
				</Select>
				<Button  @click="showAddModal" v-if="!isPLevel">新增区域</Button>
			</div>
			<div slot="list_data">
				<div class="title-row">
					<span style="">当前路径:</span>
					<span v-for="(item, index) in history.parents">
						<span v-if="index > 0" style="padding: 0 3px;">></span>
					<a @click="listParent(item, index)" v-text="item.name"></a>
					</span>
				</div>
				<ws-table :data="table.datas" style="width: 100%">
					<ws-table-column align="center" prop="name" label="名称">
						<template slot-scope="scope">
							<a @click="listChilds(scope.row)">{{scope.row.name}}</a>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="code" label="编码" width="160">
					</ws-table-column>
					<ws-table-column align="center" width="120" label="操作">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" type="text" size="small">编辑</Button>
							<Button @click="showEditModal(scope.row)" type="text" size="small">删除</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

		<wsModal v-model="modal.show" ok-text="保存" title="新增区域" @on-ok="saveModal" @on-cancel="cancelModal">
			<Form ref="from" :model="modal.form" :rules="modal.validate" :label-width="100">
				<FormItem label="名称" prop="name">
					<Input v-model="modal.form.name" autofocus></Input>
				</FormItem>
				<!-- <FormItem label="级别" prop="level">
		            <Input v-model="modal.form.level" autofocus></Input>
		        </FormItem> -->
				<FormItem label="全名" prop="fullName">
					<Input v-model="modal.form.fullName" autofocus></Input>
				</FormItem>
				<FormItem label="区域编码" prop="code">
					<Input v-model="modal.form.code" autofocus></Input>
				</FormItem>
				<FormItem label="父级名称" prop="parentName">
					{{parentName}}
				</FormItem>
				<!-- <FormItem label="父级id" prop="parentId">
		           	{{parentId}}
		        </FormItem> -->
			</Form>
		</wsModal>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				params: {
					parentId: -1,
					languageCode: 'zh'
				},
				fields: {
					languages: []
				},
				table: {
					datas: []
				},
				modal: {
					show: false,
					form: {
						name: '',
						level: '',
						fullName: '',
						code: '',
						parentName: '',
						parentId: ''
					},
					validate: {
						name: [{
							required: true,
							message: '区域名称不能为空',
							trigger: 'blur'
						}],
						level: [{
							required: true,
							message: '区域级别不能为空',
							trigger: 'blur'
						}],
						fullName: [{
							required: true,
							message: '区域全名不能为空',
							trigger: 'blur'
						}],
						code: [{
							required: true,
							message: '区域编码不能为空',
							trigger: 'blur'
						}],
					}
				},
				history: {
					parents: [{
						name: '首页',
						id: -1
					}]
				}
			}
		},
		computed: {
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				this.initLanguages();
				this.queryarea();
			},
			/**
			 * 加载翻译语言列表
			 */
			initLanguages() {
				const _this = this;
				this.axios.get('/ws/ops/v2/languages/translatable').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.fields.languages = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},			
			/**
			 * 查询区域
			 */
			queryarea() {
				const _this = this;
				let parentId = this.params.parentId;
				let languageCode = this.params.languageCode;

				this.axios.get('/ws/ops/areas/parent/' + parentId + '/' + languageCode).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.table.datas = res.data;
					} else {
						_this.$Message.warning('查询失败');
					}
				});
			},
			/**
			 * 语言切换
			 */
			languageChange() {
				this.params.parentId = -1;
				this.history.parents = [];
				this.history.parents.push({
					name: '首页',
					id: -1
				});
				this.queryarea();
			},
			saveModal() {
				
			},
			cancelModal() {
				
			},
			showEditModal(row) {
				
			},
			showAddModal() {
				
			},
			listParent(item_, index_) {
				//如果已经是最后了，就不用显示
				let parentLength = this.history.parents.length;
				if(index_ == parentLength - 1) {
					return;
				}
				//从数组中截掉
				this.params.parentId = item_.id;
				this.history.parents.splice(index_ + 1, parentLength - index_ - 1);
				this.queryarea();
			},
			listChilds(row) {
				this.history.parents.push({
					name: row.name,
					id: row.id
				});
				this.params.parentId = row.id;
				this.queryarea();
			}
		}
	}
</script>

<style scoped>
	.title-row {
		padding: 10px;
	}
</style>